<%@ page language="java" contentType="text/html; charset=utf-8"
    pageEncoding="utf-8"%>
<%@ taglib uri="http://java.sun.com/jsp/jstl/core" prefix="c" %>
<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core"%>
<%@ taglib prefix="fmt" uri="http://java.sun.com/jsp/jstl/fmt" %>
<!DOCTYPE html>
<html>
<head>
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
<style>
        .message{
            display: inline-block;
            font-size: 12px;
            color: #999;
            /* background: url(images/mess.jpg) no-repeat left center; */
            padding-left: 20px;
        }
        .wrong{
            color: red;
        }
        .right{
            color: green;
        }
    </style>
<title>Insert title here</title>
</head>
<link rel="stylesheet" href="/hospital-system/bootstrap-5.3.0/css/bootstrap.css">
<body>
     <nav class="navbar navbar-dark bg-dark ">
  <span class="navbar-brand mb-auto h1 col-lg-2 mr-auto my-10  navbar-nav-scroll">欢迎使用医生管理系统</span>
  <form class="form-inline">
     <input type="button" class="btn btn-outline-success my-2 my-sm-0" 
     onclick="window.location.href='/hospital-system/selectShowDoctor';" value="退出">
  </form>
    </nav>
 
		<form action="${pageContext.request.contextPath}/doctorinsertleave" method="post" class="mt-3" onsubmit="return checkForm()">
			<div class="row">
			 <div class="col-sm-7 offset-sm-2">
		<div class="mb-3 row">
             <label for="Bdate" class="col-sm-2 col-form-label text-dark">请假开始时间:</label>
           <div class="col-sm-10">
            <input type="date" name="bdate" id="bdate" class="ipt">
            <p class="message">请假日期应为今日及今日以后</p>
           </div>
		 </div>
		<div class="mb-3 row">
             <label for="Edate" class="col-sm-2 col-form-label text-dark">请假结束时间：</label>
           <div class="col-sm-10">
            <input type="date" name="edate" id="edate" class="mpt">
            <p class="message">请假结束日期应为请假日期及请假日期以后</p>
           </div>
		 </div>	  
		 <div class="mb-3 row">
			    <label for="Lreason" class="col-sm-2 col-form-label text-dark">请假事由：</label>
			    <div class="col-sm-10">
			      <input  type="text" class="form-control" id="lreason" name="lreason" >
			    </div>
			  </div>	
			  	 
			  <div class="mb-3 row">
			  <label for="sdept" class="col-sm-2 form-label"></label>		  
			    <div class="col-sm-3">
			      <input type="submit" class="form-control btn btn-primary" value="提交" >
			    </div>
			  </div>	
		</div>
		</div>
					  	  
		</form>
		
<script>
    var ipt=document.querySelector('.ipt');
    var mpt=document.querySelector('.mpt');
    var message=document.querySelector('.message');
    
    var input1 = document.getElementById("bdate");
    var inputValue1 = input1.value;
    var input2 = document.getElementById("edate");
    var inputValue2 = input2.value;
    
   
     var tody =now.Date().toLocaleString().format("yyyy-MM-dd");

     
    ipt.onblur=function()
    {
        if(tody>inputValue1)
        {
            message.className='message wrong';//如果直接改为.wrong的话，原有的样式也没了，因此需要在原有message样式上加上wrong的样式。
            message.innerHTML='请假日期应为今日及今日以后';
        }
        else
        {
            message.className='message right';
            message.innerHTML='日期正确';
        }
    }
   mpt.onblur=function()
    {
        if(inputValue2>inputValue1)
        {
            message.className='message wrong';//如果直接改为.wrong的话，原有的样式也没了，因此需要在原有message样式上加上wrong的样式。
            message.innerHTML='请假日期应为今日及今日以后';
        }
        else
        {
            message.className='message right';
            message.innerHTML='日期正确';
        }
    }
</script>
<script src="/hospital-system/js/jquery-3.6.1.min.js"></script>
	 <script>
		 /**
		  * 校验医生请假理由
		  * @returns {boolean}
		  */
		 function checkForm() {
			 var lreason=$("#lreason").val();
			 if(lreason==null||lreason==''){
				 alert("请假理由不能为空");
				 return false;
			 }
			 return true;
		 }

	 </script>


</body>
</html>